<template>
  <div>
    <DataHead />
    <a-table
      @change="pageChange"
      table-layout="fixed"
      class="mt-4"
      sticky
      :row-selection="{
        selectedRowKeys: table.keys,
        onChange: (k: any[]) => (table.keys = k),
      }"
      bordered
      :loading="table.loading"
      :pagination="{
        pageSize: query.pageSize,
        current: query.pageNum,
        total: query.total,
      }"
      :customRow="customRow"
      :rowKey="table.rowKey"
      :columns="formatColumns(computedColumns)"
      :data-source="table.data"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'operation'">
          <a-button type="link" @click="edit(record[table.rowKey])">
            {{ t('编辑') }}
            <EditOutlined />
          </a-button>
          <XConfirm danger type="link" @confirm="remove(record[table.rowKey])">
            删除
            <DeleteOutlined />
          </XConfirm>
        </template>
        <template v-else-if="column.key === 'dictType'">
          <a-button type="link" @click="selectType(record.dictType)">
            {{ record.dictType }}
          </a-button>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { formatColumns } from '@/utils/common/common';
import { columnsRef } from '../data/columns';
import { list, edit, remove } from '../data/curd';
import { query, table } from '../data/data';
import { form } from '../data/form';
import { useArrayFilter } from '@vueuse/core';
import type { TablePaginationConfig } from 'ant-design-vue';
import type { FilterValue, SorterResult } from 'ant-design-vue/es/table/interface';
import DataHead from './data-head.vue';

const { t } = useI18n();
import router from '@/router';
import { gotoRouter } from '@/router/utils';
/* 行事件 */
const customRow = (record: any) => {
  return {
    onClick() {
      let rowKey = table.value.rowKey;
      const id = (record as any)[rowKey];
      form.value = record;
      if (!table.value.keys.includes(id)) {
        table.value.keys.push(id);
      } else {
        table.value.keys = useArrayFilter(table.value.keys, e => e !== id).value;
      }
      table.value.keys = [id];
    },

    onDblclick() {
      edit();
    },
  };
};

/* 分页事件触发 */
const pageChange = (
  pagination: TablePaginationConfig,
  filters: Record<string, FilterValue>,
  sorter: SorterResult<any> | SorterResult<any>[],
) => {
  if (pagination.current && pagination.pageSize) {
    query.value.pageNum = pagination.current;
    query.value.pageSize = pagination.pageSize;
  }
  if (!(sorter instanceof Array)) {
    query.value.isAsc = sorter.order === 'ascend' ? 'asc' : 'desc';
  }
  list();
};
const selectType = (type: string) => {
  gotoRouter('dict-data', { type });
};
const computedColumns = computed(() =>
  columnsRef.value.map(e => {
    e.title = t(e.title);
    return e;
  }),
);
</script>

<style lang="scss" scoped></style>
